<template>
	<d2-container>
		<!-- 页头部分 -->
		<template slot="header">
			<el-form ref="queryForm" :model="queryForm" class="header-area" label-width="100px" style="height:auto">
				<!-- 说明 -->
				<!-- 一行用一个row -->
				<!-- 每行由若干个col组成 -->
				<!-- 每行所有col的span值加起来，最大不超过24！ -->
				<el-row>
					<el-col :span="4">
						<el-form-item label="收银员实名" prop="realName">
							<el-input type="text" v-model="queryForm.realName" placeholder="请输入收银员实名"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="门店名称" prop="shopName">
							<el-input type="text" v-model="queryForm.shopName" placeholder="请输入店铺名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="门店编号" prop="shopNo">
							<el-input type="text" v-model="queryForm.shopNo" placeholder="请输入店铺编号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="3">
						<el-form-item label="状态" prop="status">
							<el-select v-model="queryForm.status" placeholder="请选择状态">
								<el-option label="全部" value=""></el-option>
								<el-option label="签到" value="1"></el-option>
								<el-option label="正常签退" value="2"></el-option>
								<el-option label="异常签退" value="3"></el-option>
								<el-option label="强制签退" value="4"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="日期" prop="date">
							<el-date-picker
									v-model="date"
									type="daterange"
									:picker-options="pickerOptions"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									value-format="timestamp"
									align="right"
								></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<div class="search-submit">
							<el-button type="primary" size="medium" @click="submitForm('queryForm')">查询</el-button>
							<el-button size="medium" @click="resetForm('queryForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</template>

		<!-- 主体部分 -->
		<template>

			<!-- 表格 -->
			<!-- 表格统一用 带边框、条纹间隔 的样式 -->
			<el-table :data="tableData" stripe border style="width: 100%" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column type="index" fixed label="序号" width="50"></el-table-column>
				<el-table-column prop="weekday" label="日期" width="120" :formatter="forDateWeekday"></el-table-column>
				<el-table-column prop="realName" label="收银员实名"></el-table-column>
                <el-table-column prop="shopName" label="门店名称"></el-table-column>
				<el-table-column prop="shopNo" label="门店编码"></el-table-column>
				<el-table-column prop="signInTime" label="上班签到时间" width="150" :formatter="forDateSignIn"></el-table-column>
				<el-table-column prop="signOutTime" label="下班签退时间" width="150" :formatter="forDateSignOut"></el-table-column>
				<el-table-column prop="status" label="状态" width="120">
					<template slot-scope="scope">
                        <el-tag v-if="scope.row.status==1">签到</el-tag>
                        <el-tag v-if="scope.row.status==2">正常签退</el-tag>
                        <el-tag v-if="scope.row.status==3">异常签退</el-tag>
						<el-tag v-if="scope.row.status==4">强制签退</el-tag>
                    </template>
				</el-table-column>
				<el-table-column prop="remark" label="备注"></el-table-column>
				<el-table-column label="操作" fixed="right" width="120">
					<template slot-scope="scope">
						<el-button type="primary" size="small" @click.native.prevent="detailPage(scope.row.id)">交班详情</el-button>
                    </template>
				</el-table-column>
			</el-table>
		</template>

		<!-- 页脚部分 -->
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</template>

	</d2-container>
</template>

<script>
import { findShopCashierChangeShiftListByPage } from '@api/shopCashierChangeShift/shopCashierChangeShift'
import dayjs from 'dayjs'
export default {
  name: 'shopCashierChangeShift-index',
  data () {
    return {
      queryForm: {
        realName: '',
		shopName: '',
		shopNo: '',
        status: '',
        startDate: '',
        endDate: ''
      },
      date: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
	  tableData: [],
	  currentPage: 1,
	  pageSize: 10,
	  total: 0,
	  multipleSelection: [] 
	}
  },
  mounted () {
    this.fetchData()
  },
  methods: {
	resetPage () {
        this.currentPage = 1,
        this.pageSize = 10,
        this.total = 0
    },
	submitForm (formName) {
		this.resetPage()
        this.fetchData()
	},
	resetForm (formName) {
		this.$refs[formName].resetFields()
        this.date = []
        this.resetPage()
        this.fetchData()
	},
	fetchData () {
      this.loading = true
      this.queryForm.startDate = this.date[0] == null ? '' : dayjs(this.date[0]).format('YYYY-MM-DD')
      this.queryForm.endDate = this.date[1] == null ? '' : dayjs(this.date[1]).format('YYYY-MM-DD')
      findShopCashierChangeShiftListByPage({
        realName: this.queryForm.realName,
        shopName: this.queryForm.shopName,
		shopNo: this.queryForm.shopNo,
		status: this.queryForm.status,
        startDate: this.queryForm.startDate,
        endDate: this.queryForm.endDate,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.content
        this.total = res.data.total
        this.loading = false
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    },
	handleSizeChange (val) {
	    this.pageSize = val
		this.fetchData()
	},
	handleCurrentChange (val) {
	    this.currentPage = val
		this.fetchData()
	},
	handleSelectionChange (val) {
        this.multipleSelection = val
    },
	forDateWeekday (row, column) {
		return row.weekday == null ? '' : dayjs(row.weekday).format('YYYY-MM-DD')
	},
	forDateSignIn (row, column) {
        return row.signInTime == null ? '' : dayjs(row.signInTime).format('HH:mm:ss')
    },
	forDateSignOut (row, column) {
        return row.signOutTime == null ? '' : dayjs(row.signOutTime).format('HH:mm:ss')
    },
	detailPage (id) {
      // 跳转到详情页面
      sessionStorage.setItem('shopCashierChangeShiftId', id)
      this.$router.push({
        path: 'shopCashierChangeShift/detail',
        name: 'shopCashierChangeShift-detail',
        params: ''
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// 样式请务必加scoped

</style>
